/*产业链党建组织*/
var tableOptions1 = {
    title: {show: false},
    carousel: {enable: true, pauseOnHover: true},
    table: {
        header: {backgroundColor: '#01153300', color: '#ffffff'},
        row: {
            height: '40px',
            odd: {color: '#fff', backgroundColor: '#2ec7c900'},
            even: {color: '#fff', backgroundColor: '#011533'},
            hover: {color: '#fff', backgroundColor: '#2ec7c900'}
        },
        renderValue: function (value, name, rowIndex, columnIndex, row) {
            if (value != null) {
                if (columnIndex < 2 && value.length > 12) {
                    value = value.slice(0, 10) + '...';
                } else if (columnIndex === 2 && value.length > 13) {
                    value = value.slice(0, 13) + '...';
                }
            }
            return value;
        }
    }
}
<!-- 活动开展情况-->
var tableOptions = {
    title: {show: false},
    carousel: {enable: true, pauseOnHover: true},
    table: {
        header: {backgroundColor: "#01153300", color: "#ffffff"},
        row: {
            height: "40px",
            odd: {color: "#ffffff", backgroundColor: "#2ec7c900"},
            even: {color: "#fff", backgroundColor: "#011533"},
            hover: {color: "#fff", backgroundColor: "#2ec7c900"}
        },
        renderValue: function (value, name, rowIndex, columnIndex, row) {
            if (value != null) {
                if (columnIndex < 2 && value.length > 20) {
                    value = value.slice(0, 19) + '...';
             /*   if (columnIndex < 2 && value.length > 12) {
                    value = value.slice(0, 10) + '...';*/
                } else if (columnIndex === 2 && value.length >  20) {
                    value = value.slice(0, 19) + '...';
                } else if (columnIndex === 3 && value.length > 25) {
                    value = value.slice(0, 23) + '...';
                }

                /*     1	县级	xian
                     2	区级	qu
                     3	街道园区	jiedaoyuanqu
                     4	街道级	jiedao
                     5	镇级	zhen*/
                /*     if (value === "xian") {
                         value = '<img src="images/jb/xj.png" class="hdkz" alt="县级">'
                     } else if (value === "区级") {
                         value = '<img src="images/jb/qj.png" class="hdkz" alt="区级">'
                     } else if (value === "镇级") {
                         value = '<img src="images/jb/zj.png" class="hdkz" alt="镇级">'
                     } else if (value === "街道园区级") {
                         value = '<img src="images/jb/jd.png" class="hdkz" alt="街道园区级">'
                     }*/
                if (value === "shi") {
                    value = '<img src="images/jb/shi.png" class="hdkz" alt="县级">'
                } else if (value === "shiqu") {
                    value = '<img src="images/jb/shiqu.png" class="hdkz" alt="区级">'
                } else if (value === "jiedao") {
                    value = '<img src="images/jb/jiedao.png" class="hdkz" alt="街道园区">'
                }

            }
            return value;
        },


    }
};

function createActiveTable(active) {
    // Parse the PHOTO array (handling both string and array formats)


    let photos = [];
    try {
        photos = typeof active.ACTIVITY_PHOTO === 'string' ? JSON.parse(active.ACTIVITY_PHOTO) : active.ACTIVITY_PHOTO;
    } catch (e) {
        console.error("Error parsing PHOTO data:", e);
        photos = [];
    }
    // Generate HTML for each image
    let photosHtml = '';
    if (photos.length > 0) {
        photos.forEach(photo => {
            const cleanPhoto = photo.replace(/["'\[\]]/g, '');
            const imageUrl = `https://www.wxxf.net.cn/zhdj-api/zhdj/userfiles/fileupload/${cleanPhoto}`;
            photosHtml += `
                <div class="photo-item" style="flex: 0 0 auto; margin-right: 15px;">
                    <img src="${imageUrl}" alt="产业链活动照片" style="height: 100%; width: auto; max-width: none;">
                </div>`;
        });
    } else {
        photosHtml = '<div>暂无活动照片</div>';
    }

    // Set the table HTML with all images
    $(".big-active-content-0_5").html( `
                        <table class="table-0_5"> 
                        <tr> 
                            <td class="td_left-0_5" valign="top" > 
                                活动名称: 
                            </td> 
                            <td>  ${active.ACTICITY_NAME}</td> 
                        </tr> 
                        <tr> 
                            <td class="td_left-0_5" valign="top"> 
                                活动地点: 
                            </td> 
                            <td valign="top">  ${active.ACTIVITY_LOCATION} </td> 
                        </tr> 
                        <tr> 
                            <td class="td_left-0_5" valign="top"> 
                                活动时间: 
                            </td> 
                            <td valign="top">  ${active.ACTIVITY_TIME} </td> 
                        </tr> 
                        <tr> 
                            <td class="td_left-0_5" valign="top"> 
                                所属产业链:  
                            </td> 
                            <td valign="top">  ${active.PARTY_ORG}</td> 
                        </tr> 
                        <tr> 
                            <td class="td_left-0_5" valign="top"> 
                                活动内容:  
                            </td> 
                            <td valign="top">  ${active.CONTENT}  </td> 
                        </tr> 
                        <tr> 
                            <td class="td_left-0_5" valign="top"> 
                                活动图片:  
                            </td> 
                            <td valign="top">                    
                                <div class="photo-container scrollbar-x"  >
                                    ${photosHtml}
                                </div>
                            </td>
                        </tr> 
                    </table>`);
}


// 活动开展
var chartEventHandlers =
    {
        dblClickHandler: function (chartEvent) {
            let active = chartEvent.originalData
            createActiveTable(active)

            console.log(chartEvent.originalData);
            tipBigController_0_5(true)
        },
        mouseoverHandler: function (chartEvent) {

            let active = chartEvent.originalData
            $("#active-content").html("<div>" + active.PARTY_NAME + "</div>")
            let x = chartEvent.originalEvent.clientX;
            let y = chartEvent.originalEvent.clientY - 40;
            $(".markerboxlist").attr("style", "top:" + y + "px");

            tipController(true)
        },
        mouseoutHandler: function (chartEvent) {
            // console.log(chartEvent);
            tipController(false)
        },
    };
/*document.addEventListener('mousemove', function (event) {
    let x = event.clientX - 110;
    let y = event.clientY - 320;
    $(".markerboxlist").attr("style", "left:" + x + "px;top:" + y + "px");
});*/

/*产业链党建组织统计*/
var tableOptionsDiqu = {
    title: {show: false},
    carousel: {enable: true, pauseOnHover: true},
    table: {
        header: {backgroundColor: '#01153300', color: '#ffffff'},
        row: {
            height: '40px',
            odd: {color: '#fff', backgroundColor: '#2ec7c900'},
            even: {color: '#fff', backgroundColor: '#011533'},
            hover: {color: '#fff', backgroundColor: '#2ec7c900'}
        },
        columns: [
            {field: 'column1', title: '列1'}, // 只展示列1
            {field: 'column2', title: '列2'}, // 只展示列2
            // 你可以根据需要添加或删除列
        ],
        renderValue: function (value, name, rowIndex, columnIndex, row) {
            if (value != null) {
                if (columnIndex < 2 && value.length > 12) {
                    value = value.slice(0, 10) + '...';
                } else if (columnIndex === 2 && value.length > 12) {
                    value = value.slice(0, 10) + '...';
                }
            }
            return value;
        }
    }
}





var chartListener1 = {
    onUpdate: function (chart, results) {
        const transformedData = results[0].data.map(item => ({
            name: item.NAME,
            value: item.VALUE,
            itemStyle: JSON.parse(item.ITEMSTYLE)
        }));
        dateDiqu = transformedData
        updateChart(dateDiqu); // 更新图表
        $(".cyl-div").html(generateCylHtml(dateDiqu)); // 生成 HTML 并插入到页面
    }
}

/*/!*扇形图表*!/
let date_json = [
    {
        key: 1,
        value1: 10,
        value2: '10%',
        label: '市级',
        color: 'rgba(49,165,171,0.9)',
        img: './images/cone/01.icon1.png'
    }, {
        key: 2,
        value1: 60,
        value2: '25%',
        label: '县级',
        color: 'rgba(156,173,31,0.9)',
        img: './images/cone/02.icon2.png'
    },  {
        key: 3,
        value1: 5,
        value2: '30%',
        label: '街道级',
        color: 'rgba(52,190,117,0.9)',
        img: './images/cone/03.icon3.png'
    }
]*/
function transformData(originalData, hideZeroValues = false) {
    // 计算 value1 的总和（排除可能被隐藏的0值项）
    const filteredData = hideZeroValues
        ? originalData.filter(item => item.VALUE !== 0)
        : originalData;

    const total = filteredData.reduce((sum, item) => sum + item.VALUE, 0);

    // 定义颜色和图片的映射关系
    const styleMap = {
        1: {
            color: 'rgba(49,165,171,0.9)',
            img: './images/cone/01.icon1.png'
        },
        2: {
            color: 'rgba(156,173,31,0.9)',
            img: './images/cone/02.icon2.png'
        },
        3: {
            color: 'rgba(52,190,117,0.9)',
            img: './images/cone/03.icon3.png'
        }
    };

    // 处理数据
    return filteredData.map(item => {
        const percentage = total === 0 ? 0 : Math.round((item.VALUE / total) * 100);

        return {
            key: item.LEVEL_ID,
            value1: item.VALUE,
            value2: `${percentage}%`,
            label: item.NAME,
            color: styleMap[item.LEVEL_ID]?.color || 'rgba(0,0,0,0.9)',
            img: styleMap[item.LEVEL_ID]?.img || ''
        };
    });
}


const myFont = new FontFace('DIGIT', 'url(./font/DS-DIGI-1.ttf)')

var chartListenerCone = {
    onUpdate: function (chart, results) {
        const transformedData = transformData(results[0].data,false);

        myFont.load().then(font => {
            document.fonts.add(font)
        }).then(() => {
            getDateJson(transformedData)
        })
    }
}


// 将 itemStyle 对象转换为 CSS 样式字符串
function styleObjectToString(styleObj) {
    return Object.keys(styleObj).map(key => `${key}:${styleObj[key]}`).join(';');
}

// 生成柱状图 HTML
function generateCylHtml(data) {
     let count_all=0;
    let html = '';
    const rows = [
        [0],       // 第一行：无锡市
        [1, 2],    // 第二行：江阴市、宜兴市
        [3, 4],    // 第三行：梁溪区、锡山区
        [5, 6],    // 第四行：惠山区、滨湖区
        [7, 8]     // 第五行：新吴区、经开区
    ];
    rows.forEach(row => {
        html += '<div class="row col-md-12 m-0 p-0 h-20 w-100">';
        row.forEach(index => {
            const item = data[index];
            count_all+=item.value;
            html += `${item.name}<label class="cyl cyl-${item.name.toLowerCase()}"
                    style="${styleObjectToString(item.itemStyle)}">
                    ${item.value}
                </label>
            `;
        });
        html += '</div>';
    });
    $(".chart-sum").html(count_all+"条")
    return html;
}



let current_dangzuzhi=-1
let cengji=0
$('.dangzuzhi').on('click', function (event) {
    console.log(cengji)
    if(cengji===2){
        // 获取点击事件的目标元素
        // 获取元素的类名
        var id = event.currentTarget.id;
        if (id === "xuqiu") {
            $(".big-active-title").text("需求清单")
            changeChart("#table_xuqiu", "param", current_dangzuzhi)
            // tipXuqiu(date_ziyuan)
        } else if (id === "zijin") {
            $(".big-active-title").text("资源清单")
            changeChart("#table_ziyuan", "param", current_dangzuzhi)

        } else if (id === "xiangmu") {
            $(".big-active-title").text("项目清单")
            changeChart("#table_xiangmu", "param", current_dangzuzhi)
            // tipXiangmu(date_ziyuan)
        }
    }


})


var chartListenerXuQiu = {
    onUpdate: function (chart, results) {
        tipXuqiu(results[0].data)
    }
}

var chartListenerZiYuan = {
    onUpdate: function (chart, results) {
        console.log(results)
        tipZiyuan(results[0].data)
    }
}

var chartListenerXiangMu = {
    onUpdate: function (chart, results) {
        console.log(results)
        tipXiangmu(results[0].data)
    }
}